$bar-default-width: 7px;
$bar-default-color: rgb(0 0 0 / 45%);

@mixin prettify-scroll(
  $width: $bar-default-width,
  $color: $bar-default-color,
) {
  &::-webkit-scrollbar-track-piece {
      background-color: #fff;
      border-radius: 3px
  }

  &::-webkit-scrollbar {
      width: 12px;
      height: 10px
  }

  &::-webkit-scrollbar-thumb {
      height: 30px;
      background-color: #999;
      border: 2px solid #fff;
      border-radius: 7px;
      outline: 2px solid #fff;
      outline-offset: -2px
  }

  &::-webkit-scrollbar-thumb:hover {
      height: 30px;
      background-color: #9f9f9f;
      border-radius: 8px
  }

  // &::-webkit-scrollbar {
  //   z-index: 11;
  //   width: $width;
  // }

  // &::-webkit-scrollbar:horizontal {
  //   height: 6px;
  // }

  // &::-webkit-scrollbar-thumb {
  //   border-radius: $width / 2;
  //   width: $width;
  //   background: $color;
  // }

  // &::-webkit-scrollbar-corner,
  // &::-webkit-scrollbar-track {
  //   background: transparent;
  // }

  // &::-webkit-scrollbar-track-piece {
  //   background: transparent;
  //   width: $width;
  // }
}
